<% columns = @preview_form.responses.map(&:question).any?(&:matrix?) ? 9 : 6 %>

<div class="row columns">
  <h3 class="h3"><%= translated_attribute questionnaire.title %></h3>
  <%= decidim_sanitize_translated questionnaire.description %>
</div>

<div class="row columns">
  <%= decidim_form_for(@preview_form, url: "", method: :post, authenticity_token: !defined?(skip_authenticity_token), html: { class: "form form-defaults response-questionnaire" }, data: { "safe-path" => "" }) do |form| %>
    <%= invisible_captcha %>
    <% response_idx = 0 %>
    <% cleaned_response_idx = 0 %>
    <% @preview_form.responses_by_step.each_with_index do |step_responses, step_index| %>
      <div id="step-<%= step_index %>" class="<%= step_index.zero? ? "questionnaire-step" : "questionnaire-step hide" %>" data-toggler=".hide">
        <div class="form__wrapper">
          <% if @preview_form.total_steps > 1 %>
            <h4>
              <%= t(".current_step", step: step_index + 1) %> <span><%= t(".of_total_steps", total_steps: @preview_form.total_steps) %></span>
            </h4>
          <% end %>

          <% step_responses.each do |response| %>
            <div class="mb-4 response" data-max-choices="<%= response.question.max_choices %>">
              <%= fields_for "questionnaire[responses][#{response_idx}]", response do |response_form| %>
                <%= render(
                  "decidim/forms/questionnaires/response",
                  response_form:,
                  response:,
                  response_idx:,
                  cleaned_response_idx:,
                  disabled: false
                ) %>
              <% end %>
            </div>
            <% if !response.question.separator? %>
              <% cleaned_response_idx += 1 %>
            <% end %>
            <% response_idx += 1 %>
          <% end %>

          <% if step_index + 1 == @preview_form.total_steps %>
            <div>
              <%= form.check_box :tos_agreement, label: t(".tos_agreement"), id: "questionnaire_tos_agreement", disabled: false %>
              <div class="help-text">
                <%= decidim_sanitize_translated questionnaire.tos %>
              </div>
            </div>
          <% end %>
        </div>

        <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between mb-4">
          <%= cell(
            "decidim/forms/step_navigation",
            step_index,
            total_steps: @preview_form.total_steps,
            button_disabled: true,
            form:
          ) %>
        </div>
      </div>
    <% end %>
  <% end %>
</div>

<%= append_stylesheet_pack_tag "decidim_templates" %>
